<template>
  <div>
    <van-cell-group :border="false" class="qt-padding">
      <van-cell title="Build" :border="false" :value="buildData" />
      <van-cell title="Branch" :border="false" :value="version.branch" />
      <van-cell title="Commithash" :border="false" :value="version.commithash" />
      <van-cell title="brand" :border="false" :value="systemInfo.brand" />
      <van-cell title="model" :border="false" :value="systemInfo.model" />
      <van-cell title="version" :border="false" :value="systemInfo.version" />
      <van-cell title="system" :border="false" :value="systemInfo.system" />
      <van-cell title="platform" :border="false" :value="systemInfo.platform" />
      <van-cell
        title="选择开发环境"
        is-link
        :border="false"
        :value="baseUrl"
        @click="showSheet = true"
      />
      <van-cell title="增加开发环境" is-link :border="false" @click="showPopup = true" />
    </van-cell-group>
    <van-action-sheet
      v-model="showSheet"
      description="选择开发环境"
      cancel-text="清空自定义环境"
      :close-on-click-overlay="true"
      :actions="serviceList"
      :round="false"
      @close="showSheet = false"
      @cancel="cancelSheet"
      @select="selectSheet"
    />
    <van-popup v-model="showPopup" @close="closePopup">
      <qt-form class="popup--form" ref="form" :model="form" :rules="rules">
        <qt-input v-model="form.name" label="环境名称" />
        <qt-input v-model="form.url" label="环境地址" />
        <qt-button :square="true" @click="submitService">确定</qt-button>
      </qt-form>
    </van-popup>
  </div>
</template>

<script>
import Dayjs from 'dayjs';
import { mapActions, mapState } from 'vuex';
import { QtButton, QtInput, QtForm } from '@/components/baseComp';

export default {
  name: 'system',

  components: {
    QtButton,
    QtInput,
    QtForm,
  },

  data() {
    return {
      showSheet: false,
      showPopup: false,
      version: {
        branch: BRANCH,
        commithash: COMMITHASH,
        buildData: BUILDDATE,
      },
      form: {
        name: '',
        url: '',
      },
      rules: {
        name: {
          required: true,
          message: '请输入环境名称',
        },
        url: {
          required: true,
          message: '请输入环境地址',
        },
      },
      systemInfo: {},
    };
  },

  computed: {
    ...mapState('common', ['baseUrl', 'serviceList']),

    buildData() {
      return Dayjs(this.version.buildData).format('YYYY-MM-DD HH:mm:ss');
    },
  },

  methods: {
    ...mapActions('common', ['setData']),

    validate() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve(valid);
          }
        });
      });
    },

    submitService() {
      this.validate().then(async () => {
        const serviceList = this._.cloneDeep(this.serviceList);
        serviceList.push(this.form);

        this.setData({
          key: 'serviceList',
          value: serviceList,
          modules: 'common',
        });

        this.closePopup();
      });
    },

    cancelSheet() {
      const serviceList = this._.cloneDeep(this.serviceList);

      this.setData({
        key: 'serviceList',
        value: serviceList.filter((item) => {
          return item.type === 'default';
        }),
        modules: 'common',
      });

      this.showSheet = false;
    },

    closePopup() {
      Object.assign(this.$data, this.$options.data.call(this));
      this.showPopup = false;
    },

    handleChange(value, fieldName) {
      this.form[fieldName] = value;
    },

    selectSheet(event) {
      this.setData({
        key: 'baseUrl',
        value: event.url,
        modules: 'common',
      });
      this.showSheet = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.popup--form {
  width: 240px;
  overflow: hidden;
}
::v-deep .van-cell {
  border-bottom: 1px solid #dadada !important;
  background-color: transparent;
}
</style>
